<template>
  <div class="generalSelect">
    <div>
      <el-table
          :data="tableData"
          height="600"
          class="table-bordered"
          style="width: 300px"
          @row-click="getDetails">
        <el-table-column
            prop="projectName"
            label="项目"
            class-name="project-column"
        >
        </el-table-column>
      </el-table>
    </div>
    <el-main v-if="projectDetails" class="project-details">
      <el-card>
        <h1>项目信息</h1>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card class="info-card">
              <p><strong>项目ID:</strong> {{ projectDetails.projectId }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>项目名称:</strong> {{ projectDetails.projectName }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>任务进度:</strong> {{ projectDetails.taskProgress }}%</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>负责人ID:</strong> {{ projectDetails.responsibleId }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>重要程度:</strong> {{ projectDetails.importantLevel }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>项目状态:</strong> {{ projectDetails.projectStatus }}</p>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="info-card">
              <p><strong>开始时间:</strong> {{ formatDate(projectDetails.startDate) }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>结束时间:</strong> {{ formatDate(projectDetails.endDate) }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>预算:</strong> {{ projectDetails.budget }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>合同额:</strong> {{ projectDetails.contractAmount }}</p>
            </el-card>
            <el-card class="info-card">
              <p><strong>项目类别:</strong> {{ projectDetails.projectType }}</p>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <div class="project-buttons">
        <el-row :gutter="20" align="middle" justify="center">
          <el-col :span="12" style="text-align: center;">
            <el-button type="primary" @click="updateProjectStatus(1)">通过审查</el-button>
          </el-col>
          <el-col :span="12" style="text-align: center;">
            <el-button type="danger" @click="updateProjectStatus(0)">不通过审查</el-button>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import http from "@/api/http";
/**/
export default {
  name: 'CheckPage',
  data() {
    return {
      id: 0,
      tableData: [],
      projectDetails: null // 存储项目详细信息
    }
  },
  methods: {
    getDetails(row) {
      this.id = row.projectId;
      this.fetchProjectDetails(this.id)
    },
    getinfo() {
      http.get("/api/audit/pending")
          .then(res => {
            this.tableData = res;
            console.log(res);
          })
          .catch(error => {
            console.error("Error fetching projects:", error);
          });
    },
    fetchProjectDetails(projectId) {
      http.get(`/api/general/project/${projectId}`)
          .then(res => {
            this.projectDetails = res;
            console.log("Project details:", res);
          })
          .catch(error => {
            console.error(`Error fetching project ${projectId} details:`, error);
          });
    },
    updateProjectStatus(isApproved) {
      const projectId = this.projectDetails.projectId;
      console.log(projectId)
      http.post(`/api/audit/updateStatus`, null, {
        params: {
          projectId: projectId,
          isApproved: isApproved
        }
      })
          .then(res => {
            this.$message.success(res);
            console.log(res);
            this.projectDetails = null; // 清空 projectDetails 使 el-card 不显示
            this.getinfo(); // 更新列表
          })
          .catch(error => {
            console.error(`Error updating project status for project ${projectId}:`, error);
            this.$message.error("Failed to update project status");
          });
    },
    formatDate(date) {
      return new Date(date).toLocaleDateString();
    }
  },
  created() {
    this.getinfo()
  }
}
</script>

<style>
.generalSelect {
  display: flex;
  justify-content: flex-start;
}
.project-details {
  margin-left: 20px;
  padding: 20px;
}
.project-details h1 {
  font-size: 24px;
  margin-bottom: 20px;
}
.project-details p {
  font-size: 16px;
  margin: 5px 0;
}
.project-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
